﻿@model Nop.Web.Models.Catalog.BranchModel
@using Nop.Core.Domain.Catalog;

    <div class="window">
        <div class="window-title grad-lightgrey grad">
            <div class="window-title-bar  grad-titleshine grad">
                <h2 class="section-title">
                    @T("Stores.Location")
                </h2>

            </div>
        </div>
        <div class="window-content space">
            <div class="store-front-image">
                <img alt="@Model.StoreFrontPictureModel.AlternateText" src="@Model.StoreFrontPictureModel.ImageUrl" title="@Model.StoreFrontPictureModel.Title" />
            </div>

            <div class="store-map">
                <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>  
                <script type="text/javascript">
                    var map = null;
                    var searchManager = null;
                    $(document).ready(function () {
                        getMap();
                    });
            
                    function getMap() {
                        map = new Microsoft.Maps.Map(document.getElementById('storeMap'), { credentials: '@Model.MapApiKey', disableKeyboardInput: true });
                        LoadSearchModule();
                    }
                    function createSearchManager()
                    {
                        map.addComponent('searchManager', new Microsoft.Maps.Search.SearchManager(map));
                        searchManager = map.getComponent('searchManager');
                    }
                    function LoadSearchModule()
                    {
                        Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: geocodeRequest })
                    }
                    function geocodeRequest()
                    {
                        createSearchManager();
                        var where = '@Model.Address1, @Model.City, @Model.StateProvinceName, @Model.CountryName';
                        var request = {
                            where: where,
                            count: 1,
                            bounds: map.getBounds(),
                            callback: onGeocodeSuccess,
                            errorCallback: onGeocodeFailed,
                            userData: '@Model.Name'
                        };
                        searchManager.geocode(request);
                    }
                    function onGeocodeSuccess(result, userData)
                    {
                        if (result) {
                            map.entities.clear();
                            var topResult = result.results && result.results[0];
                            if (topResult)
                            {
                                var pushpin = new Microsoft.Maps.Pushpin(topResult.location, null);
                                map.setView({ center: topResult.location, zoom: 12 });
                                map.entities.push(pushpin);
                            }
                        }
                    }
                    function onGeocodeFailed(result, userData)
                    { }
                </script> 
                <div id='storeMap' style="position:relative; width:435px; height:325px;"></div>
            </div>

            <div class="store-address">
                <div class="icon icon-maptag"></div>
                <h4>@Model.Name</h4>
                <span>Address: @Model.Address1, @Model.City @Model.CountryName @Model.ZipPostalCode</span><br />
                <span>Telephone: @Model.PhoneNumber</span>
            </div>
        <div class="content-float-clear"></div>
    </div>
</div>
        
